<template>
  <div class="test-drawer">
    <h2>工作流设计器抽屉测试</h2>

    <div class="test-buttons">
      <Button @click="openV1Drawer" type="primary" size="large">
        打开 V1 版本
      </Button>
      <Button
        @click="openV2Drawer"
        type="primary"
        size="large"
        style="margin-left: 16px"
      >
        打开 V2 版本
      </Button>
    </div>

    <!-- V1版本抽屉 -->
    <V1Drawer>
      <div style="height: calc(100vh - 120px); overflow: hidden">
        <RboWorkflowDesignerV1 />
      </div>
    </V1Drawer>

    <!-- V2版本抽屉 -->
    <V2Drawer>
      <div style="height: calc(100vh - 120px); overflow: hidden">
        <RboWorkflowDesignerV2 />
      </div>
    </V2Drawer>
  </div>
</template>

<script lang="ts" setup>
import { Button } from 'ant-design-vue';
import { useVbenDrawer } from '@vben/common-ui';
import { RboWorkflowDesignerV1, RboWorkflowDesignerV2 } from './index';

// 抽屉相关
const [V1Drawer, v1DrawerApi] = useVbenDrawer({
  title: 'RBO工作流设计器 V1 (自定义实现)',
  width: '90%',
  footer: false,
  closeOnClickModal: false,
  modal: false,
});

const [V2Drawer, v2DrawerApi] = useVbenDrawer({
  title: 'RBO工作流设计器 V2 (基于Tinyflow)',
  width: '90%',
  footer: false,
  closeOnClickModal: false,
  modal: false,
});

const openV1Drawer = () => {
  v1DrawerApi.open();
};

const openV2Drawer = () => {
  v2DrawerApi.open();
};
</script>

<style lang="less" scoped>
.test-drawer {
  padding: 24px;

  h2 {
    margin-bottom: 24px;
    color: #1890ff;
  }

  .test-buttons {
    display: flex;
    gap: 16px;
  }
}
</style>
